<template>
  <div id="app" class="app-container">
    <!-- 顶部栏 -->
    <header-bar></header-bar>
    
    <!-- 主体内容 -->
    <div class="main-content">
      <!-- 左侧边栏 -->
      <side-bar></side-bar>
      
      <!-- 画布区域 -->
      <div class="canvas-container">
        <canvas id="main-canvas"></canvas>
      </div>
    </div>
    
    <!-- 底部工具栏 -->
    <tool-bar @tool-change="handleToolChange"></tool-bar>
  </div>
</template>

<script>
import { fabric } from 'fabric'
import HeaderBar from '@/components/HeaderBar.vue'
import SideBar from '@/components/SideBar.vue'
import ToolBar from '@/components/ToolBar.vue'

export default {
  name: 'App',
  components: {
    HeaderBar,
    SideBar,
    ToolBar
  },
  data() {
    return {
      canvas: null,
      isDrawing: false,
      currentPath: null,
      drawingSettings: {
        tool: 'select',
        penType: 'pencil',
        penColor: '#000000'
      }
    }
  },
  mounted() {
    this.initCanvas()
  },
  methods: {
    initCanvas() {
      this.canvas = new fabric.Canvas('main-canvas')
      this.canvas.setBackgroundColor('#000000', this.canvas.renderAll.bind(this.canvas))
      
      // 设置画布大小
      const resize = () => {
        const container = document.querySelector('.canvas-container')
        this.canvas.setWidth(container.offsetWidth)
        this.canvas.setHeight(container.offsetHeight)
      }
      resize()
      window.addEventListener('resize', resize)

      // 添加鼠标事件监听
      this.canvas.on('mouse:down', this.onMouseDown)
      this.canvas.on('mouse:move', this.onMouseMove)
      this.canvas.on('mouse:up', this.onMouseUp)
    },
    
    handleToolChange(toolSettings) {
      this.drawingSettings = toolSettings
      
      // 根据工具设置鼠标样式
      if (toolSettings.tool === 'pen') {
        this.canvas.defaultCursor = 'crosshair'
        this.canvas.selection = false
      } else {
        this.canvas.defaultCursor = 'default'
        this.canvas.selection = true
      }
    },
    
    onMouseDown(event) {
      if (this.drawingSettings.tool !== 'pen') return
      
      this.isDrawing = true
      const pointer = this.canvas.getPointer(event.e)
      
      // 根据笔触类型设置不同的绘制参数
      let pathSettings = {
        stroke: this.drawingSettings.penColor,
        strokeWidth: 2,
        fill: null
      }
      
      switch (this.drawingSettings.penType) {
        case 'pencil':
          pathSettings.strokeWidth = 2
          break
        case 'brush':
          pathSettings.strokeWidth = 4
          pathSettings.strokeLineCap = 'round'
          pathSettings.strokeLineJoin = 'round'
          break
        case 'chalk':
          pathSettings.strokeWidth = 6
          pathSettings.strokeDashArray = [5, 5]
          break
      }
      
      this.currentPath = new fabric.Path(`M ${pointer.x} ${pointer.y}`, pathSettings)
      this.canvas.add(this.currentPath)
    },
    
    onMouseMove(event) {
      if (!this.isDrawing) return
      
      const pointer = this.canvas.getPointer(event.e)
      this.currentPath.path.push(['L', pointer.x, pointer.y])
      this.canvas.renderAll()
    },
    
    onMouseUp() {
      this.isDrawing = false
      this.currentPath = null
    }
  }
}
</script>

<style>
.app-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100vw;
}

.main-content {
  flex: 1;
  display: flex;
  overflow: hidden;
}

.canvas-container {
  flex: 1;
  position: relative;
  width: 100%;
  height: 100%;
}

#main-canvas {
  width: 100% !important;
  height: 100% !important;
}
</style> 